<template>
	<div class="app-container">
    
		<div class="filter-container clearfix">
     
			<el-form :inline="true" :model="listQuery" class="demo-form-inline">
				<el-form-item label="场地">
					<el-select v-model="listQuery.matchPlaceId" placeholder="请选择" style="width:100px;">
						<el-option v-for="(item,index) in matchPlaceList" :key="index" :label="item.placeName" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="项目">
					<el-input class="article-textarea"  style="width:110px;"  v-model="listQuery.scheduleName"></el-input>
				</el-form-item>
				<el-form-item label="组别">
					<el-input class="article-textarea"  style="width:110px;"  v-model="listQuery.scheduleGroup"></el-input>
				</el-form-item>
				<el-form-item label="级别">
					<el-input class="article-textarea"  style="width:110px;"  v-model="listQuery.scheduleLevel"></el-input>
				</el-form-item>
				<el-form-item label="状态">
					<el-select v-model="listQuery.state" placeholder="请选择" style="width:100px;">
						<el-option label="未完成" value="0"></el-option>
						<el-option label="已完成" value="1"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="getListByQuery">查询</el-button>
				</el-form-item>
			</el-form>
      <div class="fr" v-if="isMutiLock">
        <el-button style="margin-left: 10px;" @click="lockMatch" type="primary">锁定</el-button>
			  <el-button style="margin-left: 10px;" @click="unLockMatch" type="primary">解锁</el-button>
      </div>
    </div>
		<el-table class="tqd_table" :data="list" @selection-change="handleSelectionChange" v-loading="listLoading" border fit highlight-current-row style="width: 100%;">
      <el-table-column v-if="isMutiLock" align="center" type="selection" width="55"></el-table-column>
      <el-table-column label="编号" show-overflow-tooltip width="120">
        <template slot-scope="scope">
          {{scope.row.matchCode}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="项目" show-overflow-tooltip width="250">
        <template slot-scope="scope">
          <span>{{scope.row.scheduleName}}</span>
        </template>
      </el-table-column>
	    <el-table-column align="center" label="组别" width="250" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.scheduleGroup}}</span>
        </template>
      </el-table-column>
	    <el-table-column align="center" label="队伍、姓名" width="250" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.blueTeam}}：{{scope.row.bluePlayer}}</span>
        </template>
      </el-table-column>
      <el-table-column width="" align="center" label="检录状态" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope.row.isCheck==0">未检录</span>
          <span v-else>已检录</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope.row.isLocked==0">未锁定</span>
          <span v-else>已锁定</span>
          <span v-if="scope.row.isComplete==0">未完成</span>
          <span v-else>已完成</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="editSchedule(scope.row.id,scope.row.lockId)">编辑场次</el-button>
        </template>
      </el-table-column>
    </el-table>

		<!-- <el-card class="box-card item-list" style="margin-top:20px;">
			<div slot="header" class="clearfix">
				<span>小计(人/组)</span>
			</div>
			<div>
				<el-row>
					<el-col :span="4">
						传统品势
					</el-col>
					<el-col style="width:70px;">
						<div class="item-label">个人品势</div>
          </el-col>
					<el-col style="width:100px;">
						<el-input class="article-textarea"  v-model.number="temp.name">
          </el-input>
					</el-col>
					<el-col style="width:70px;margin-left:20px;">
						<div class="item-label">混双品势</div>
          </el-col>
					<el-col style="width:100px;">
						<el-input class="article-textarea"  v-model.number="temp.name">
          </el-input>
					</el-col>
					<el-col style="width:70px;margin-left:20px;">
						<div class="item-label">团体品势</div>
          </el-col>
					<el-col style="width:100px;">
						<el-input class="article-textarea"  v-model.number="temp.name">
          </el-input>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="4">
						自创品势
					</el-col>
					<el-col style="width:70px;">
						<div class="item-label">自创品势</div>
          </el-col>
					<el-col style="width:100px;">
						<el-input class="article-textarea"  v-model.number="temp.name">
          </el-input>
					</el-col>
					<el-col style="width:70px;margin-left:20px;">
						<div class="item-label">自创混双</div>
          </el-col>
					<el-col style="width:100px;">
						<el-input class="article-textarea"  v-model.number="temp.name">
          </el-input>
					</el-col>
					<el-col style="width:70px;margin-left:20px;">
						<div class="item-label">自创团体</div>
          </el-col>
					<el-col style="width:100px;">
						<el-input class="article-textarea"  v-model.number="temp.name">
          </el-input>
					</el-col>
				</el-row>
			</div>
		</el-card> -->

    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[15,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
		

		<!-- 登记个人品势成绩 -->
    <el-dialog title="登记个人品势成绩" :visible.sync="dialogFormVisible3" :center="true" :show-close="false" width="850px">
      <el-form :inline="true" :model="listQuery" class="demo-form-inline">
				<el-row>
					<el-col style="width:150px;text-align:center">
						男子成人组A组ff
					</el-col>
					<el-col style="width:650px;text-align:center">
						成绩清单
					</el-col>
				</el-row>
				<el-row>
					<el-col style="width:150px;text-align:center">
						<img src="https://img30.360buyimg.com/popWaterMark/jfs/t9751/122/1851367810/435710/851543b1/59e83359Nb21bc7e8.jpg" style="max-width:150px;max-height:200px;"/>
					</el-col>
					<el-col style="width:650px;text-align:center">
						<el-table class="tqd_table" :key='tableKey' :data="list2" v-loading="listLoading" noborder fit style="width: 100%;">
							<el-table-column align="center" label="项目">
								<template slot-scope="scope">
									<span class="link-type" @click="handleUpdate(scope.row)">准确性</span>
								</template>
							</el-table-column>
							<el-table-column align="center" label="分数1">
								<template slot-scope="scope">
									<el-input v-model.number="temp.name"></el-input>
								</template>
							</el-table-column>
							<el-table-column align="center" label="分数2">
								<template slot-scope="scope">
									<el-input v-model.number="temp.name"></el-input>
								</template>
							</el-table-column>
							<el-table-column align="center" label="分数3">
								<template slot-scope="scope">
									<el-input v-model.number="temp.name"></el-input>
								</template>
							</el-table-column>
							<el-table-column align="center" label="分数4">
								<template slot-scope="scope">
									<el-input v-model.number="temp.name"></el-input>
								</template>
							</el-table-column>
							<el-table-column align="center" label="分数5">
								<template slot-scope="scope">
									<el-input v-model.number="temp.name"></el-input>
								</template>
							</el-table-column>
							<el-table-column align="center" label="小计">
								<template slot-scope="scope">
									<el-input class="article-textarea" type="Number" v-model.number="temp.name"></el-input>
								</template>
							</el-table-column>
							<el-table-column align="center" label="平均">
								<template slot-scope="scope">
									<el-input class="article-textarea" type="Number" v-model.number="temp.name"></el-input>
								</template>
							</el-table-column>
						</el-table>
						<el-form-item label="最后总分">
							<el-input class="article-textarea"  style="width:110px;"  v-model="temp.name"></el-input>
						</el-form-item>
						<el-form-item label="最后得分">
							<el-input class="article-textarea"  style="width:110px;"  v-model="temp.name"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col style="width:150px;text-align:center">
						男子成
					</el-col>
				</el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="createData">重置分数</el-button>
				<el-button type="primary" @click="createData">提交</el-button>
        <el-button @click="dialogFormVisible2 = false">取消</el-button>
      </div>
    </el-dialog>

		<!-- 登记个人品势成绩 -->
    <el-dialog title="" v-if="dialogFormVisible2" :visible.sync="dialogFormVisible2" :center="true" width="850px" :before-close="closeDialog">
      <editScheduleForm :scheduleId.sync="editScheduleId" ref="editScheduleDialog" :scheduleList="list"></editScheduleForm>
			<!-- <el-form :inline="true" :model="temp" class="setForm">
				<div class="setForm-row">
					<el-form-item>
						<el-input v-model="temp.name" class="border-green big-size sm"></el-input>
					</el-form-item>
					<el-form-item>
						<el-input v-model="temp.name" class="border-green big-size sm"></el-input>
					</el-form-item>
					<el-form-item class="fl-class" style="100%">
						<el-input v-model="temp.name" class="border-green" width="100%"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="info" plain>扩展</el-button>
					</el-form-item>
					<el-form-item>
						<el-select v-model="temp.name" placeholder="活动区域" style="width:120px;">
							<el-option label="区域一" value="shanghai"></el-option>
							<el-option label="区域二" value="beijing"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="info" plain>推送</el-button>
					</el-form-item>
				</div>
				<div class="setForm-row">
					<el-form-item class="fl-class" style="100%">
						<el-input v-model="temp.name" class="border-green" width="100%"></el-input>
					</el-form-item>
					<el-form-item class="fl-class" style="100%">
						<el-input v-model="temp.name" class="border-green" width="100%"></el-input>
					</el-form-item>
					<div>
					<div style="display:flex;width:220px;">
						<el-form-item>
						<el-button type="info" plain icon="el-icon-caret-top"></el-button>
					</el-form-item>
					<el-form-item>
						<el-select v-model="temp.name" placeholder="A001">
							<el-option label="区域一" value="shanghai"></el-option>
							<el-option label="区域二" value="beijing"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="info" plain icon="el-icon-caret-bottom"></el-button>
					</el-form-item>
					</div>
					<div class="fl-class" style="display:flex">
						<el-form-item style="width:100%">
						<el-button type="info" plain  style="width:100%">刷新</el-button>
					</el-form-item>
					<el-form-item style="width:100%">
						<el-button type="info" plain  style="width:100%">锁定</el-button>
					</el-form-item>
					</div>
					</div>
				</div>
				<div class="setForm-row">
					<el-form-item class="fl-class" style="100%">
						<el-input v-model="temp.name" class="border-green" width="100%"></el-input>
					</el-form-item>
					<el-form-item class="fl-class" style="100%">
						<el-input v-model="temp.name" class="border-green" width="100%"></el-input>
					</el-form-item>
					<div>
						<div style="width:150px;" class="fl-class">
							<el-form-item>
							<el-input v-model="temp.name" class="border-green" width="100%"></el-input>
							</el-form-item>
							<el-form-item style="width:100%">
								<el-button type="info" plain  style="width:100%">开始</el-button>
							</el-form-item>
							<el-form-item style="width:100%">
								<el-button type="info" plain  style="width:100%">结束</el-button>
							</el-form-item>
							<el-form-item style="width:100%">
								<el-button type="info" plain  style="width:100%">确认比分</el-button>
							</el-form-item>
							<el-form-item style="width:100%">
								<el-button type="info" plain  style="width:100%">公布成绩</el-button>
							</el-form-item>
							<el-form-item style="width:100%">
								<el-button type="info" plain  style="width:100%">公布排名</el-button>
							</el-form-item>
						</div>
					</div>
				</div>
			</el-form> -->
    </el-dialog>
	</div>

</template>
<script>
import { getScheduleList } from '@/api/matchSchedule'
import { getMatchPlaceList } from '@/api/matchPlace'
import { lock, unLocked } from '@/api/matchScheduleLocked'
import { getMatchInfo } from '@/api/match'
import waves from '@/directive/waves' // 水波纹指令
import { showMsg } from '@/utils'
import editScheduleForm from './components/editSchedule'
export default {
  name: 'complexTable',
  directives: {
    waves
  },
  data() {
    return {
      multipleSelection: [],
      matchPlaceList: null,
      list2: [0, 0],
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        matchId: null,
        scheduleName: null,
        matchPlaceId: null,
        scheduleLevel: null,
        scheduleGroup: null,
        state: null,
        pageNum: 1,
        pageSize: 15
      },
      temp: {
        id: undefined,
        name: null,
        time: null,
        matchMode: null,
        dataURL: null,
        fieldNumber: null,
        refereeMode: null
      },
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      dialogStatus: '',
      textMap: {
        update: '修改',
        create: '添加'
      },
      dialogPvVisible: false,
      pvData: [],
      rules: {
        name: [{ required: true, message: '必填', trigger: 'blur' }],
        time: [{ required: true, message: '必选', trigger: 'change' }],
        dataURL: [{ required: true, message: '必填', trigger: 'blur' }],
        fieldNumber: [{ required: true, message: '必填', trigger: 'blur' }],
        refereeMode: [{ required: true, message: '必选', trigger: 'change' }]
      },
      downloadLoading: false,
      editScheduleId: null,
      lockId: null,
      isMutiLock: false
    }
  },
  components: { editScheduleForm },
  created() {
    this.listQuery.matchId = this.$route.query.matchId
    this.listQuery.matchPlaceId = Number(this.$route.query.matchPlaceId)
    this.getMatchInfo()
    this.getList()
    this.getMatchPlaceList()
  },
  methods: {
    getMatchInfo() {
      getMatchInfo({ matchId: this.$route.query.matchId }).then(res => {
        this.isMutiLock = res.data.data.multiType
      })
    },
    closeDialog(done) {
      this.$refs.editScheduleDialog.clearInt()
      done()
    },
    handleSelectionChange(val) {
      this.multipleSelection = []
      for (var i in val) {
        this.multipleSelection.push(val[i])
      }
    },
    getMatchPlaceList() {
      getMatchPlaceList({ matchId: this.$route.query.matchId }).then(response => {
        this.matchPlaceList = response.data.data
        // this.total = response.data.total
        // this.listLoading = false
      })
    },
    getList() {
      this.listLoading = true
      getScheduleList(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total

        // Just to simulate the time of the request
        this.listLoading = false
      })
    },
    getListByQuery() {
      this.listLoading = true
      getScheduleList(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total

        // Just to simulate the time of the request
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    handleModifyStatus(row, status) {
      this.$message({
        message: '操作成功',
        type: 'success'
      })
      row.status = status
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        name: null,
        time: null,
        matchMode: null,
        dataURL: null,
        fieldNumber: null,
        refereeMode: null
      }
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
          this.temp.author = 'vue-element-admin'
          // createArticle(this.temp).then(() => {
          //   this.list.unshift(this.temp)
          //   this.dialogFormVisible = false
          //   this.$notify({
          //     title: '成功',
          //     message: '创建成功',
          //     type: 'success',
          //     duration: 2000
          //   })
          // })
        }
      })
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.temp.timestamp = new Date(this.temp.timestamp)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
          // updateArticle(tempData).then(() => {
          //   for (const v of this.list) {
          //     if (v.id === this.temp.id) {
          //       const index = this.list.indexOf(v)
          //       this.list.splice(index, 1, this.temp)
          //       break
          //     }
          //   }
          //   this.dialogFormVisible = false
          //   this.$notify({
          //     title: '成功',
          //     message: '更新成功',
          //     type: 'success',
          //     duration: 2000
          //   })
          // })
        }
      })
    },
    editSchedule(id, lId) {
      this.dialogFormVisible2 = true
      this.editScheduleId = id
    },

    handleDelete(row) {
      this.$prompt('请输入密码', '确认删除？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
        // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        // inputErrorMessage: '邮箱格式不正确'
      }).then(({ value }) => {
        this.$message({
          type: 'success',
          message: '你的密码是: ' + value
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },
    lockMatch() {
      if (this.multipleSelection.length <= 0) {
        showMsg('请至少选择一条数据', 2)
        return false
      }
      var objList = null
      if (this.multiType) {
        objList = []
      }
      for (var i in this.multipleSelection) {
        var obj = {
          matchId: this.multipleSelection[i].matchId,
          matchScheduleId: this.multipleSelection[i].id,
          matchAdminId: 8888
        }
        if (!this.multiType) {
          objList = obj
        } else {
          objList.push(obj)
        }
      }

      lock(objList).then(res => {
        if (res.data.code === 0) {
          this.dialogFormVisible = false
          showMsg(res.data.message, 1)
          this.getList()
        } else {
          showMsg(res.data.message, 2)
        }
      })
    },
    unLockMatch() {
      if (this.multipleSelection.length <= 0) {
        showMsg('请至少选择一条数据', 2)
        return false
      }
      var objList = []
      for (var i in this.multipleSelection) {
        // var obj = {
        //   matchId: this.multipleSelection[i].matchId,
        //   matchScheduleId: this.multipleSelection[i].id,
        //   matchAdminId: 8888
        // }
        objList.push(this.multipleSelection[i].lockId)
      }
      unLocked(objList).then(res => {
        if (res.data.code === 0) {
          this.dialogFormVisible = false
          showMsg(res.data.message, 1)
          this.getList()
        } else {
          showMsg(res.data.message, 2)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.setForm .setForm-row{
	.sm{
		width: 70px;
	}
	.fl-class{
		    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
		width: 100%;
		.el-form-item__content{
			width:100%;
		}
	}
	display: flex;
	    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
	.el-form-item{
		vertical-align: middle;
	}
	input{
		text-align: center;
	}
	.border-green input{
		border: 2px solid mediumseagreen;
	}
	.big-size input{
		line-height: 50px;
		height: 50px;
	}
}
.item-list{
	.item-label{
		line-height: 36px;
	}
	input {
    resize: none;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #bfcbd9;
	}
}
</style>
<style lang="scss">
.item-list{
	input {
    resize: none;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #bfcbd9;
	}
}
.clearfix:after {
   content:""; 
   display: block; 
   clear:both; 
}
</style>

     